<template>
    <transition name="fade">
        <div
            class="about"
            ref="about"
            :class="{ 'is-visible': isShow }"
        >
            <div class="mask"></div>
            <div class="about-container">
                <h2 class="text_lg">关于：</h2>
                <p class="text_xs mb-4">
                    这个应用可以用来追踪你选择城市的当前天气
                </p>
                <h2 class="text_lg">如何使用</h2>
                <p class="text_xs mb-4">
                    1.点击搜索框输入你希望追踪的城市<br />
                    2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
                    3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
                </p>
                <h2 class="text_lg">移除城市：</h2>
                <p class="text_xs mb-4">
                    如果你不想在首页关注某个城市,可以通过底部的按钮删<br />除它
                </p>
                <button class="text_xs btn" @click="close">关闭</button>
            </div>
        </div>
    </transition>
</template>
<script setup>
import { ref } from "vue";
const about = ref(null);
// 接收父组件传入的isShow
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false,
    },
});
// 将isShow的值传递给父组件，并关闭弹窗
const emits = defineEmits(["handleClose"]);
const close = () => {
    emits("handleClose", false);
};
</script>
<style scoped>
.about {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.6s ease, opacity 0.7s ease;
}
.about.is-visible {
    visibility: visible;
    opacity: 1;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.5s ease;
}
.about-container {
    padding: 16px;
    margin: 128px 0 0;
    background-color: #fff;
    color: #000;
    margin-right: 0;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
h2 {
    margin: 0;
}
p {
    margin-top: 0;
}
.btn {
    padding: 8px 24px;
    margin: 32px 0 0;
    background-color: #004e71;
    border: none;
    color: #fff;
    cursor: pointer;
}
</style>
